<template>
  <div class="gedan">
      <!-- 分类按钮区 -->
    <button class="flbtns" @click="chooselist">
      {{ fenlei }} <i class="iconfont icon-weibiaoti1"></i>
    </button>
    <i class="iconfont icon-shangsanjiaoxi sanjiao" v-show="isout"></i>
    <div class="musiclist" v-show="isout">
      <el-card class="box-card">
        <div slot="header" class="clearfix" @click="keyvalue('全部')">
          <h1>全部歌单分类</h1>
        </div>
        <dl v-for="(m, index) in getgd" :key="index" class="text-item">
          <dt class="text_left">
            <i class="iconfont" :class="iconlist[index]"></i>
            {{ m }}
          </dt>
          <dd class="text_right">
            <a
              class="text_line"
              v-for="(m, index) in getgedanlist[index]"
              :key="index"
              @click="keyvalue(m)"
            >
              {{ m }}
            </a>
          </dd> 
        </dl>
      </el-card>
    </div>
    <div class="gedanhot">
            <span>热门推荐</span>
            <i v-for="(m,index) in gethotlist" :key="index" @click="keyvalue(m)" :class="{active:emitzi==m}">{{m}}</i>
    </div>
    <div class="gedanlist">
          <div class="gedanlie" v-for="(m,index) in getcatelist" :key='index' @click="gosd(m)">
                    <img :src="`${m.coverImgUrl}?param=230y230`" alt="">
                    <span>{{m.name}}</span>
          </div>
          
    </div>
   <div  class="fenye">  <el-button-group class="btns">
           <el-button icon="el-icon-arrow-left" v-show="isoffset!==0" @click="isoffset--">上一页</el-button>
           <el-button  v-show="isoffset!==50" @click="isoffset++">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group></div>
  
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      fenlei: "全部",
      emitzi:'全部',
      isout: false,
      isoffset:0,
      iconlist: [
        " icon-diqiu",
        " icon-gangqin",
        "icon-kafeiting",
        " icon-xiaolian",
        " icon-yinle1",
      ],
    };
  },
  watch:{
  isoffset(){
    console.log(this.isoffset);
    this.$store.dispatch('getcatelist',{m:this.emitzi,mi:this.isoffset*10})
  },
  emitzi(){
      this.$store.dispatch('getcatelist',{m:this.emitzi,mi:this.isoffset*10})
  }
  },
  methods: {
    chooselist() {
      this.isout = !this.isout;
    },
    keyvalue(m){
        this.fenlei=m
        this.isout=false
        this.emitzi=m
    },
    gosd(m){
      console.log(m);
      sessionStorage.setItem('socc',JSON.stringify(m.id))
        this.$router.push('/gedantwo')
    }
  },
  mounted() {
    this.$store.dispatch("getgdlist");
    this.$store.dispatch('gethotlist')
    this.$store.dispatch('getcatelist',{m:this.fenlei,mi:this.isoffset})
  },
  computed: {
    ...mapState({
      getgd: (state) => {
        return state.user.getgd;
      },
      getgedanlist: (state) => {
        return state.user.getgdlist;
      },
      gethotlist:(state)=>{
          return state.user.gethotlist;
      },
      getcatelist:(state)=>{
          return state.user.getcatelist
      }
    //   getcatelist:(state)=>{
    //       return state.user.getcatelist
    //   }
    }),
  },
};
</script>

<style lang='less' scoped>
.gedan {
  position: relative;
  margin: 10px 130px;
  margin-right: -15px;
  height: 100%;

 
  .flbtns {
    width: 120px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #c3c3c3;
    background-color: #f3f3f3;
    border-radius: 7%;
    cursor: pointer;
    .iconfont {
      font-size: 16px;
    }
  }
  .sanjiao {
    position: absolute;
    top: 40px;
    left: 60px;
    color: #bebebe;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    background-color: #ffff;
  }
  .musiclist {
    position: absolute;
    top: 53px;
    left: 0px;
    width: 700px;
    height: 400px;
    background-color: #ffff;
    border: 1px solid #bebebe;
    cursor: pointer;
    overflow: auto;
    .top {
      margin-top: 10px;
    }
    h1 {
      font-size: 20px;
    }
    .text-item {
            display: block;
    
      overflow: hidden;

      .text_left {
        float: left;
        display: inline;
        width: 70px;
        font-size: 16px;
        margin-top: -3px ;
         
           i{
                display: inline-block;
                vertical-align: middle;
                font-style: normal;
                text-align: left;
                 font-size: 26px;
                 font-weight: bold;
           }
      }
          .text_right{
              display: block;
              
              margin-left:70px ;
             border-left: 1px solid #e6e6e6;
              padding-bottom: 20px;
              .text_line{
                  display: inline-block;
                  
                  width: 100px;
                  font-size: 16px;
                  text-align: center;
                   margin-bottom: 10px;
          
              }
          }
    }
  }
  .gedanhot{
      margin: 20px 0;
      border-bottom: 1px solid #c3c3c3;
      span{
          font-size: 26px;
          font-weight: bold;
          margin-right: 20px;
      }
      i{
          margin: 0 20px;
          font-size: 16px;
          cursor: pointer;
           &.active{
                font-weight: bold;
        color: skyblue;
           }
      }
      i:hover{
        font-weight: bold;
        color: skyblue;
      }
  }
  .gedanlist{
      margin-top: 40px;
    
       .gedanlie{
           float: left;
           width:230px ;
           height: 230px;
          
           margin-right: 26px;
           padding-bottom: 60px;
            img{
                width: 230px;
                height: 230px;
                  cursor: pointer;
            }
            span{
                font-size: 15px;
            }
       }
     
  }
    .fenye{
     float: left;
     width: 100%;
    height: 160px;
    .btns{
      float: right;
      margin-right: 185px;
    }
  }
}
</style>